﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>展业海报·个人中心</title>
    <meta name="keywords" content="展业海报|个人中心">
    <meta name="description" content="展业海报|个人中心">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="展业海报|个人中心">
    <meta name="msapplication-TileColor" content="#0e90d2">
    <style>
        #swiperBanner .swiper-pagination-bullet {
            width: 6px;
            height: 6px;
            display: inline-block;
            border-radius: 100%;
        }
    </style>
    <script type="text/javascript">

    </script>
    <link rel="stylesheet" href="{D_PATH}static/css/reset.css">
    <link rel="stylesheet" href="{D_PATH}static/css/style.css">
    <script src="{D_PATH}static/js/rem.js"></script>
</head>
<style>
    .page4_header .user_msgDetail .username_img-::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_un.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-7::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_weeks.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-31::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_month.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-93::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_season.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-186::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_half.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-366::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_one.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-367::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_one_black.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-732::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_two.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-1089::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_three.png") no-repeat;
        background-size: 100%;
    }
    .page4_header .user_msgDetail .username_img-99999::after{
        content: "";
        position: absolute;
        margin-left: .1rem;
        top: .04rem;
        width: .32rem;
        height: .35rem;
        background: url("{D_PATH}static/images/vip_icon_vvip.png") no-repeat;
        background-size: 100%;
    }
    .loan-box .check-wrap .small_icon img{
        height: .42rem;
        width: .32rem;
        display: inline-block;
        vertical-align: middle;
        margin-right: .2rem;
    }
    .tabbar-item.active {
        color: #ed662c;
    }
    .center_style{
        margin-bottom: 1rem;
    }
    .tabbar-box {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 53px;
        background: #fff;
        border-top: 1px solid #dcdcdc;
        z-index: 999;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }
    .tabbar-item {
        display: block;
        width: 25%;
        line-height: 16px;
        /*font-size: 1rem;*/
        color: #747474;
        text-align: center;
    }
    .tabbar-item:before {
        content: '';
        display: block;
        width: 40px;
        height: 32px;
        margin: 0px auto 0;
    }
    .tabbar-item:nth-child(1):before {
        background: url({D_PATH}static/images/design_icon_1.png) no-repeat center center;
        background-size: 23.5px 19px;
    }
    .tabbar-item:nth-child(2):before {
        background: url({D_PATH}static/images/video_icon_1.png) no-repeat center center;
        background-size: 23px 23px;
    }
    .tabbar-item:nth-child(3):before {
        background: url({D_PATH}static/images/good_icon_1.png) no-repeat center center;
        background-size: 23.5px 22.5px;
    }
    .tabbar-item.active:nth-child(4):before {
        background: url({D_PATH}static/images/me_active_icon_1.png) no-repeat center center;
        background-size: 21.5px 21px;
    }
</style>
<style>
    .content {
        position: relative;
    }
    .tabbar-box {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 53px;
        background: #fff;
        border-top: 1px solid #dcdcdc;
        z-index: 99;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .tabbar-item {
        display: block;
        width: 20%;
        line-height: 16px;
        /*font-size: 1rem;*/
        color: #747474;
        text-align: center;
    }
    .tabbar-item:before {
        content: '';
        display: block;
        width: 40px;
        height: 32px;
        margin: 0 auto;
    }
    .tabbar-item:nth-child(1):before {
        background: url({D_PATH}static/images/design_icon_1.png) no-repeat center center;
        background-size: 23.5px 19px;
    }
    .tabbar-item.active:nth-child(2):before {
        background: url({D_PATH}static/images/video_active_icon_1.png) no-repeat center center;
        background-size: 23px 23px;
    }
    .tabbar-item:nth-child(4):before {
        background: url({D_PATH}static/images/good_icon_1.png) no-repeat center center;
        background-size: 23.5px 22.5px;
    }
    .tabbar-item:nth-child(5):before {
        background: url({D_PATH}static/images/me_icon_1.png) no-repeat center center;
        background-size: 21.5px 21px;
    }
    .tabbar-item.active:nth-child(5):before {
        background: url({D_PATH}static/images/me_active_icon_1.png) no-repeat center center;
        background-size: 21.5px 21px;
    }
    .tabbar-tool {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        padding-top: 32px;
        width: 22%;
        height: 100%;
        line-height: 16px;
        /*font-size: 1rem;*/
        color: #747474;
        text-align: center;
    }
    .tabbar-tool:before, .tabbar-tool:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        box-sizing: border-box;
    }
    .tabbar-tool:before {
        z-index: 1;
        top: -25px;
        width: 48px;
        height: 48px;
        background: url({D_PATH}static/images/tool_icon_1.png) no-repeat center center;
        background-size: cover;
    }
    .tabbar-tool:after {
        top: -30px;
        width: 60px;
        height: 30px;
        background-color: #fff;
        border: 1px solid #dcdcdc;
        border-radius: 60px 60px 0 0;
        border-bottom: 0;
    }
    .mask {
        display: none;
        position: fixed;
        top: 0;
        z-index: 9999;
        overflow: hidden;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, .97);
    }
    .mask h2 {
        margin: 26px 0 0 38px;
        font-weight: normal;
        color: #424242;
        font-size: 26px;
    }
    .mask h4 {
        margin: 2px 0 0 38px;
        font-weight: normal;
        color: #8b8b8b;
        font-size: 15px;
    }
    .mask .nav {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .mask .nav-item {
        width: 33.33%;
        height: 100px;
        text-align: center;
        font-size: 14px;
        line-height: 40px;
        color: #747474;
    }
    .mask .nav-item:nth-child(n+1) {
        margin-top: 10px;
    }
    .mask .nav-item:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 50px;
        height: 50px;
    }
    .mask .nav-item:nth-child(1):before {
        background: url({D_PATH}static/images/h5_1.png) no-repeat center center;
        background-size: cover;
    }
    .mask .nav-item:nth-child(2):before {
        background: url({D_PATH}static/images/barrage_1.png) no-repeat center center;
        background-size: cover;
    }
    .mask .nav-item:nth-child(3):before {
        background: url({D_PATH}static/images/putcard_1.png) no-repeat center center;
        background-size: cover;
    }
    .mask .nav-item:nth-child(4):before {
        background: url({D_PATH}static/images/watermark_1.png) no-repeat center center;
        background-size: cover;
    }
    .mask .nav-item:nth-child(5):before {
        background: url({D_PATH}static/images/businesscard_1.png) no-repeat center center;
        background-size: cover;
    }
    .mask .nav-item:nth-child(6):before {
        background: url({D_PATH}static/images/release_1.png) no-repeat center center;
        background-size: cover;
    }
    .mask .btn-close {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 32px;
        margin: 0 auto;
        width: 40px;
        height: 40px;
    }
    .mask .btn-close i {
        display: block;
        height: 100%;
        background: url({D_PATH}static/images/close_1.png) no-repeat center center;
        background-size: 16px;
    }
    .negative-close {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transition: all .3s;
        -webkit-transition: all .3s;
    }
    .positive-close {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transition: all .3s;
        -webkit-transition: all .3s;
    }

</style><body>
<div class="loan-box">
    <div class="page4_header">
        <p class="p1">
            <span class="span_left" onclick="showPopup()">
                <a class="kefu_style"></a>
                <a href="#">客服</a>
            </span>
            <span class="span_right"><a href="{php echo $this->createMobileUrl('person',array('op'=>'ziliao'));}" class="set_head">设置</a></span>
        </p>
        <div class="user_msg">
            <img class="user_img" src="{D_PATH}static/picture/avatar_icon.png">
            <div class="user_msgDetail">
                <p class="username username_img-">展业海报用户</p>
                <p class="vipMessage">会员海报无限使用(定制产品不含)</p>

            </div>
        </div>
    </div>
    <!--<div class="myPoster">-->
    <!--<p class="myPoster_title">我的海报-->
    <!--<a href="javascript:">查看 ></a>-->
    <!--</p>-->
    <!--<div class="myPoster_img">-->
    <!--<img src="{D_PATH}static/picture/poster_img1.png" alt="">-->
    <!--<img src="{D_PATH}static/picture/poster_img2.jpg" alt="">-->
    <!--<img src="{D_PATH}static/picture/poster_img3.png" alt="">-->
    <!--<img src="{D_PATH}static/picture/poster_img4.png" alt="">-->
    <!--</div>-->
    <!--</div>-->
    <div class="check-wrap">
        <div class="input-group">
            <a href="/qutu/user/bind_phone?pn=1&recommend_id=666666" class="wrap-url">
                <label for="" class="icon icon1">已绑定手机</label>
                <span class="arrow"></span>
                <span class="binding">未绑定</span>
            </a>
        </div>


        <div class="input-group">
            <a href="/qutu/vip?pn=1&recommend_id=666666" class="wrap-url">
                <label for="" class="icon icon3">会员续费享9折优惠</label>
                <span class="arrow"></span>
            </a>
        </div>
    </div>

    <div class="check-wrap">
        <div class="input-group">
            <a href="" class="wrap-url">
                <label for="" class="icon icon4">推荐会员</label>
                <span class="arrow"></span>
            </a>
        </div>
        <div class="input-group">
            <a href="" class="wrap-url">
                <label for="" class="icon icon5">我的收藏</label>
                <span class="arrow"></span>
            </a>
        </div>

    </div>


    <div style="text-align: center;height: 50px;margin-bottom: 50px">Copyright © 2018 </div>

    {template 'footer'}
</div>
</body>
<script>
    var wx = document.getElementsByClassName('custom-box')[0];
    var isblack = document.getElementsByClassName('blackbg')[0];
    function showPopup() {
        wx.style.display ="block";
        isblack.style.display = "block"
    }
    function isShow() {
        wx.style.display ="none";
        isblack.style.display = "none"
    }
</script>
<script src="{D_PATH}static/js/jquery-1.11.2.min_1.js"></script>
<script src="{D_PATH}static/js/jquery.easing.1.3_1.js"></script>

<script>
    $(function(){
        $(".tabbar-tool").on('click', function(e) {
            e.preventDefault();
            $(".mask").show();
            $(".tabbar-box").hide();
            $(".mask .nav").animate({
                bottom: '+100px', opacity: 1
            }, 500, "easeInOutElastic");
            $(".mask .btn-close i").removeClass().addClass('negative-close')
        })
        $(".mask .btn-close").on('click', function(e) {
            e.preventDefault();
            $(".mask .nav").animate({
                bottom: 0, opacity: 0
            }, 500, "swing", function() {
                $(".mask").hide();
                $(".tabbar-box").show();
            });
            $(".mask .btn-close i").removeClass().addClass('positive-close')
        })
    });
</script>
</html>